<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="<%=request.getContextPath()%>/">
<title></title>
		<link rel="stylesheet" href="css/reg.css" />
		<style>
		.main{
        	margin:0 auto;
        	width:900px;
        }
        .line1{
        	background:#6588A8;
        	width:900px;
        	height:4px;
        	margin-top:-5px;
        }
        .second{
        	background: #D8E9F7;
        	height:30px;
        	width:900px;
        }
        .head{
        	height:35px;
        	background: #79A3CF;
        	color:#fff;
        	font:bold 16px "微软雅黑";
        	padding-left: 10px;
        	line-height: 35px;
        }
        table{
        	margin: 20px 60px;
        	font:15px "微软雅黑";
        	color: #333333;
        }
        tr{
        	text-align: left;
        	height:36px;
        }
        .aa{
        	height:18px;
        	width:180px;
        	border:1px solid #79A3CF;
        }
        .line2{
        	width:900px;
        	height: 1px;
        	background: #7BA4D0;
        	margin-top:25px;
        }
        .end{
        	margin-top:5px;
        	text-align: center;
        	color:#333333;
        	font:13px "微软雅黑";
        }
        .third{
        	width:600px;
        	border:2px solid #79A3CF;
        	margin:30px auto;
        }
        .third2{
        	width:400px;
        	height:90px;
        	border:2px solid #79A3CF;
        	margin:50px auto;
        }

        .bottom{
        	height:10px;
        }
        .bb{
        	padding-left:0px;
        	height:18px;
        	width:360px;
        	border:1px solid #79A3CF;
        }
        a{
        	color:#2484C1;
        	font:14px "微软雅黑";
        	text-decoration: none;
        }
        a:hover{
        	text-decoration: underline;
        }
        .tableb{
        	margin:10px auto;
        }
        .top{
        	font:bold 40px "微软雅黑";
        	color:#3B99FC;
        	margin-bottom:5px;
        }
		</style>
		<script type="text/javascript" src="js/jquery-1.x.js"></script>
		<script type="text/javascript">
			function checkname() {
				var name=document.getElementById("username").value;
			 	$.get("AjaxRegisterServlet",{"username":name},function(data){
			 		console.log(name);
			 		var msg=document.getElementById("msg");
			 		msg.innerHTML=data;
			 		msg.value=data;
			 	});
				
			}
			
			function check() {
				console.log(1)
				var username=document.getElementById("username").value;
				var password=document.getElementById("password").value;
				var password1=document.getElementById("password1").value;
				var pmsg=document.getElementById("pmsg").value;
				console.log(username);
				console.log(password);
				console.log(pmsg);
				if(username.value==""||username.value==null){
					pmsg.innerHTML="用户名不能为空";
					return false;
				}
				if(msg.value!="用户名可以使用"){
					return false;
				}
				if(password.value==""||password.value==null){
					pmsg.innerHTML="密码不能为空";
					return false;		
				}else if(password.value!=password1.value){				
					pmsg.innerHTML="密码不一致";
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<div class="main">
			<div class="top">
				在 线 投 票 系 统
			</div>
			<div class="line1"></div>
			<div class="second"></div>
			<div class="third">
				<div class="head">新用户注册</div>
				<form action="registerServlet" method="post" onsubmit="return check()" >
					<table>
						<tr>
							<td>用户名：</td>
							<td><input type="text" required id="username" name="username" class="aa" onblur="checkname()"/></td>
							<td><span id="msg"></span></td>
						</tr>
						<tr>
							<td>密码：</td>
							<td><input type="password" required name="password" class="aa" id="password"/></td>
						</tr>
						<tr>
							<td>确认密码：</td> 
							<td><input type="password" required name="password1" class="aa"  id="password1"/></td>
							<td align="left"><span id="pmsg"></span></td>
						</tr>
						<tr>
							<td></td>
							<td align="left"><input type="submit"  value="" style="width:120px; height:30px;border:0;background:url(img/button_register.gif);"/></td>
						</tr>
					</table>
				</form>
			</div>
			<div class="line2"></div>
			<div class="end">
				青软实训 &copy; 版权所有
			</div>
		</div>
	</body>
</html>
